<template>
  <div
    class="mlist yearnews module bgShow ff_noSlider bgimg"
  >
    <div class="bgmask"></div>
    <div class="module_container">
      <div class="container_header wow animate__animated animate__fadeInUp">
        <p class="title">{{ $t("home_project") }}</p>
        <p class="subtitle">Research projects</p>
      </div>
      <div
        class="
          container_category
          wow
          movedx
          animate__animated animate__fadeInUp
        "
        data-movedx-mid="2"
        data-movedx-distance="15"
      >
        <div class="container">
          <router-link :to="{ name: 'Research' }" class="active">
            <span>{{ $t("home_more") }}&nbsp;></span>
          </router-link>
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="container_content slickbtn1 btnsty1">
        <ul class="content_list clearfix">
          <div class="row grid-space-16 tab_content">
            <div class="col-md-3 col-xs-6"  v-for="(item, index) in projects"
                :key="index">
              <li
                class="item_block wow animate__animated animate__fadeInUp"
                style="
                  animation-delay: 0s;
                  float: left;
                  list-style: none;
                  position: relative;
                  visibility: visible;
                "
              >
                <div class="wrapper">
                  <div class="item_wrapper">
                    <router-link
                      :to="{ name: 'ResearchDetail', query: { id: item.id } }"
                    ></router-link>
                    <div class="item_info">
                      <router-link
                        :to="{ name: 'ResearchDetail', query: { id: item.id } }"
                      >
                        <p class="title ellipsis">
                          {{ item | filterTitle }}
                        </p>
                        <p class="subtitle">{{ item | filterSubTitle }}</p>
                        <div class="description">
                          <div
                            class="
                              cScrollbar
                              mCustomScrollbar
                              _mCS_1
                              mCS_no_scrollbar
                            "
                          >
                            <div
                              id="mCSB_1"
                              class="
                                mCustomScrollBox
                                mCS-light
                                mCSB_vertical mCSB_inside
                              "
                              style="max-height: none"
                              tabindex="0"
                            >
                              <div
                                id="mCSB_1_container"
                                class="
                                  mCSB_container
                                  mCS_y_hidden mCS_no_scrollbar_y
                                "
                                style="position: relative; top: 0; left: 0"
                                dir="ltr"
                              >
                                <p>
                                  {{ item | filterDescription }}
                                </p>
                              </div>
                              <div
                                id="mCSB_1_scrollbar_vertical"
                                class="
                                  mCSB_scrollTools mCSB_1_scrollbar
                                  mCS-light
                                  mCSB_scrollTools_vertical
                                "
                                style="display: none"
                              >
                                <div class="mCSB_draggerContainer">
                                  <div
                                    id="mCSB_1_dragger_vertical"
                                    class="mCSB_dragger"
                                    style="
                                      position: absolute;
                                      min-height: 0px;
                                      height: 0px;
                                      top: 0px;
                                    "
                                  >
                                    <div
                                      class="mCSB_dragger_bar"
                                      style="line-height: 0px"
                                    ></div>
                                  </div>
                                  <div class="mCSB_draggerRail"></div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </router-link>
                      <router-link
                        class="details"
                        :to="{ name: 'ResearchDetail', query: { id: item.id } }"
                      ></router-link>
                    </div>
                  </div>
                </div>
              </li>
            </div>
          </div>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
import { isEn } from '@/common/util';

export default {
  name: 'HomeTeam',
  props: {
    projects: {
      type: Array
    }
  },
  watch: {
    projects() {
      this.$nextTick(() => {
        this.initSlick()
      })
    }
  },
  filters: {
    filterTitle(item) {
      return isEn() ? item.title_en : item.title
    },
    filterSubTitle(item) {
      return isEn() ? item.extra_en : item.extra
    },
    filterDescription(item) {
      return isEn() ? item.description_en : item.description
    }
  },
  methods: {
    initSlick() {
      $(".yearnews .tab_content").slick({
        dots: false,
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 4,
        responsive: [
          {
            breakpoint: 880,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 2,
              dots: true

            }
          },
          {
            breakpoint: 680,
            settings: {
              slidesToShow: 1,
              arrows: false,
              slidesToScroll: 1, dots: true
            }
          }
        ]
      });
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
@import url("./style.css");
</style>
